<template>
  <div class="about">
    <h1>state</h1>
    <h2>{{ $store.state.num }}</h2>
    <button @click="$store.state.num = 999">修改num,不规范修改</button>
    <button @click="btnClick">调用mutations</button>
    <button @click="btnClick2">调用actions</button>
    <hr />
    <h1>map使用</h1>
    <h3>{{ num }}</h3>
    <button @click="setNum(Date.now())">通过map函数调用mutations</button>
    <button @click="refreshNum">通过map函数调用actions</button>
    <h1>getters使用</h1>
    <h3>{{ $store.getters.getNum }}</h3>
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState(['num'])
  },
  methods: {
    ...mapMutations(['setNum']),
    ...mapActions(['refreshNum']),
    btnClick () {
      const num = Date.now()
      this.$store.commit('setNum', num)
    },
    btnClick2 () {
      this.$store.dispatch('refreshNum')
    }
  }
}
</script>
